import React, { Component, PropTypes, cloneElement } from 'react';
import ReactDOM from 'react-dom';


/********************************************Start 组件声明方式***********************************************/
// 1)普通声明方式
const App1 = React.createClass({
  render(){
    return <div>Hello World 1</div>
  }
});
ReactDOM.render(<App1/>,document.getElementById("root1"));

// 2)无状态声明方式（性能最优）
const App2 = ({pro = 'Hello World 2'}) => (
    <div>{ pro }</div>
);
ReactDOM.render(<App2/>,document.getElementById("root2"));

// 3)ES6声明方式
class App3 extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <div>Hello World 3</div>
        )
    }
}
ReactDOM.render(<App3/>,document.getElementById("root3"));

// 4)命名空间
const App4 = {
    Content: React.createClass({
        click: function(){},
        render: function() {
            return (
                <div>Hello World 4</div>
            )
        }
    })
};
ReactDOM.render(<App4.Content/>,document.getElementById("root4"));

/********************************************End 组件声明方式***********************************************/





/********************************************Start 装饰器***********************************************/

// 我们定义一个过滤器
const Filter = (Com) => class extends Com{
    constructor(props){
        super(props);
        this.filter = {};
        // 增加上证
        this.filter.addCode = (num) => `${ num }.SH`;
    }
    render(){
        return super.render();
    }
}

// 组件内调用过滤器
@Filter
class Com extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return <div>{ this.filter.addCode(600616) }</div>
    }
}
ReactDOM.render(<Com/>,document.getElementById("root5"));

/********************************************End 装饰器***********************************************/






/********************************************Start 组件生命周期***********************************************/
class Cycle extends Component{
    constructor(props){
        super(props);
        console.log(`实例化组件`);
        // 设置初始状态
        this.state = {
            name: `Cycle`
        };
    }
    componentWillmount(){
        console.log(`组件将要第一次渲染这里可以调用this.setState`);
    }
    componentDidMount(){
        console.log(`组件第一次渲染完成这里可以调用this.setState`);
    }
    componentWillReceiveProps(){
        console.log(`组件参数发生变化这里可以调用this.setState`);
    }
    shouldComponentUpdate(){
        console.log(`组件是否要更新`);
        return true;
    }
    componentWillUpdate(){
        console.log(`组件将要更新`);
    }
    componentDidUpdate(){
        console.log(`组件更新完成这里可以调用this.setState`);
    }
    componentWillUnmount(){
        console.log(`组件已经被卸载`);
    }
    click(){
        this.setState({
            name: `Cycle Is Click`
        });
    }
    render(){
        return (
            <div onClick={ ::this.click }>{ this.state.name }</div>
        )
    }
}
ReactDOM.render(<Cycle/>,document.getElementById("root6"));
/********************************************End 组件生命周期***********************************************/

